<template>
  <div class="User">

    <nav-bar class="navbar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.replace('/home')"></span>
      <div slot="center" class="center">我的知心Go</div>
      <span slot="right" class="iconfont icon-gengduo right"></span>
    </nav-bar>
    <div class="user">
      <div class="userInfo">
        <img src="~assets/img/mall.jpg" alt="" @click="$router.push('/profile')">
        <div class="info-item">
          <span>{{userList.username}}</span><br>
          <span>用户名:{{userList.username}}</span><br>
          <span>{{userList.phone?userList.phone:'' | userPhone}}</span>

        </div>
        <div class="info-setting" @click="$router.push('/profile')">
          <span class="iconfont icon-shezhi"></span>
          <span class="setting">账号管理</span>
        </div>
      </div>
    </div>
    <ul class="handel">
      <li>
        <span class="iconfont icon-daifukuan icon"></span>
        <span>待付款</span>
      </li>
      <li>
        <span class="iconfont icon-daishouhuo icon"></span>
        <span>待收货</span>
      </li>
      <li>
        <span class="iconfont icon-trues icon"></span>
        <span>已完成</span>
      </li>
      <li>
        <span class="iconfont icon-dingdan orders icon"></span>
        <span>全部订单</span>
      </li>
    </ul>
    <ul class="goods">
      <li>
        <span class="iconfont icon-31quanbushangpin icon"><em>20</em></span>
        <span>关注的商品</span>
      </li>
      <li>
        <span class="iconfont icon-dianpu icon"><em>5</em></span>
        <span>关注的店铺</span>
      </li>
      <li>
        <span class="iconfont icon-icon icon"><em>10</em></span>
        <span>我的足迹</span>
      </li>
    </ul>
    <p class="recommend">为你推荐</p>
    <recommend :recommend-list-info="recommendList" class="recommendList"></recommend>
  </div>
</template>
<script>
import navBar from 'components/common/navbar/navBar'
import Recommend from 'components/content/recommend/Recommend'


export default {
  name: 'Profile',
  data() {
    return {
      recommendList: [], //推荐数据列表
      userList: [],//用户信息列表 
    }
  },
  components: {
    navBar,
    Recommend
  },
  created() {
    this.getRecommendInfo()
    this.getUserInfo()
  },
  filters: {
    userPhone(val) {

      if (val) {
        let str = val
        str = str.replace(str.substring(4, 8), '****')
        return str
      } else {
        return ''
      }

    }
  },
  methods: {
    // 获取商品的推荐信息
    async getRecommendInfo() {
      const res = await this.$require({
        url: '/product/recommend',
        method: 'get'
      })
      if (res.status == 0) {
        this.recommendList = res.data
      }
    },
    async getUserInfo() {
      if (window.sessionStorage.getItem('token')) {

        const res = await this.$require({
          url: '/user/info',
          method: 'get'
        })
        if (res.status == 0) {
          this.userList = res.data
          // 将当前获取到的用户信息存在VueX中
          this.$store.dispatch('saveUserInfo', res.data)
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.User {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.navbar {
  background-color: #f6f6f6;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 0;
  .leftInfo {
    font-weight: bold;
    font-size: 20px;
    display: block;
  }
  .center {
    font-weight: 500;
  }
  .right {
    font-weight: bold;
    font-size: 20px;
    display: block;
  }
}
.user {
  margin: 50px 3% 3px;
  background: linear-gradient(90deg, #eb3c3c, #ff7459);
  width: 94%;
  border-radius: 8px;
  height: 115px;
  color: #fff;
  font-size: 14px;
  .userInfo {
    padding: 25px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-betweens;
    align-items: center;
    position: relative;
    img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      vertical-align: middle;
      border-radius: 50%;
    }
    .info-item {
      margin-left: 10px;
      span {
        display: inline-block;
        padding-top: 4px;
      }
    }
    .info-setting {
      position: absolute;
      right: 10px;
      top: 15px;
      color: rgba(76, 0, 0, 0.7);
      span {
        font-weight: bolder;
      }
      .setting {
        font-weight: 500;
        padding-left: 5px;
      }
    }
  }
}
.handel {
  height: 65px;
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: center;
  margin-bottom: 15px;
  li {
    flex: 1;
    span {
      display: block;
    }
    .icon {
      color: #dd9e58;
      font-size: 20px;
      margin-bottom: 3px;
    }
    .orders {
      color: #eb3c3c;
    }
  }
}
.goods {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: center;
  margin-bottom: 15px;
  li {
    flex: 1;
    span {
      display: block;
      color: #333;
      em {
        color: #333;
        font-size: 14px;
        font-style: normal;
        margin-left: 3px;
      }
    }
    .icon {
      color: #eb3c3c;
      font-size: 20px;
    }
  }
}
.recommend {
  height: 45px;
  background-color: #fff;
  line-height: 45px;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 500;
}
.recommendList {
  // margin-bottom: 50px;
  padding-bottom: 50px;
}
</style>
